import React, { Fragment, useRef, useEffect, useCallback ,useState } from "react";
import { View, Icon, Video, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import { useAppSelector } from "@src/store";
import defaultAvatar from "@assets/images/defaultAvatar.jpg";

import "./index.scss";
import TaroStatusBar from "@src/components/status-bar";
import { useSystemInfo } from "@src/hooks";
import CustomVideo from "@src/components/custom-video";



export default function PostVideoDetail() {
    const { currentPost } = useAppSelector(state => state);
    const systemInfo = useSystemInfo();
    const [playIndex,setPlayIndex] = useState(0);


    const handleSwiperChange = useCallback((event) => {
        const current = event.detail.current;
        setPlayIndex(current);
    }, []);


    const videoUrl = currentPost.data.all_medias ? currentPost.data.all_medias[0].file_url : "";
    return (<View className="postDetail">
        <TaroStatusBar translucent backgroundColor="rgba(0, 0, 0, 0)" barStyle="light-content" />
        <Swiper style={{ height: systemInfo.screenHeight }} vertical onChange={handleSwiperChange}>
            {
                [3, 2].map((mediaDetail, index) => {
                    return (<SwiperItem key={index}>
                        <CustomVideo src={videoUrl} play={playIndex == index} className="postDetail__video" repeat fullScreen controls={false} style={{ height: systemInfo.screenHeight }} id={`myVideo_${index}`}  />
                        <View className="postDetail__content">
                            <Text>{`@${currentPost.data.publisher_name}`}</Text>
                            <Text>
                                {currentPost.data.content}
                            </Text>
                        </View>
                        <View className="postDetail__operateBar">
                            <View className="postDetail__button">
                                <Image className="postDetail__button__avatar" src={currentPost.data.avatorUrl || defaultAvatar} />
                            </View>
                            <Icon className="postDetail__button" type="success">点赞</Icon>
                            <Icon className="postDetail__button" type="info">评论</Icon>
                            <Icon className="postDetail__button" type="warn">分享</Icon>
                        </View>
                    </SwiperItem>);
                })
            }
        </Swiper>
    </View >);
}